<%@page pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<script type="text/javascript" src="<c:url value="/js/jquery-validate/jquery.validate.min.js"/>"></script>
<script type="text/javascript" src="<c:url value="/js/jquery-validate/localization/messages_es.js"/>"></script> 
<script>
var eventoId = <c:out value="${eventoId}"/>;
var pasajeroId = <c:out value="${pasajeroId}"/>;

$(document).ready(function(){
	$("#mensaje").parent().hide();
	  

	$(".button").button();	
	$("#content_form").hide();
	
	jQuery.ajax({
        type : 'GET',
        url : '<c:url value="/app/servicioPasajero/evento/id/"/>' + eventoId + '/pasajero/id/' + pasajeroId,
        contentType : 'application/json',
        dataType : 'json',
        success : servicioObtenerRegistroAlojamientoSuccessCallBack,
        error : servicioObtenerRegistroAlojamientoErrorCallBack

    });
	$("#volver").bind("click", function(){
		window.location.href = '<c:url value="/app/page/evento/"/>'  + eventoId + '/pasajero';
		return false;
	});
	
	$("#crear_actualizar").bind("click", crear_actualizarPorPasajeroPrincipal);
});

function crear_actualizarPorPasajeroPrincipal() {
	var reservaSeleccionada = {};
    $(".reserva").each(function(){
        var $this = $(this); 
        var id = $this.attr("id");
        var $radioRequiere = $("input[name='" + id + "[]requiere']:checked", $this);
        var requiere;
        var alojamiento;            
          

        if ($radioRequiere.length) {
            requiere = $radioRequiere.val();
            if (requiere != "NO"){
               alojamiento = $this.serializeObject();
               //reservaSeleccionada = alojamiento[id];
               reservaSeleccionada.id = alojamiento[id].id;
               reservaSeleccionada.registroAlojamientoId = alojamiento[id].registroAlojamientoId;
               reservaSeleccionada.cantidadHabitacionSimple = alojamiento[id].cantidadHabitacionSimple;
               reservaSeleccionada.cantidadHabitacionDoble = alojamiento[id].cantidadHabitacionDoble;
               reservaSeleccionada.cantidadHabitacionOtra = alojamiento[id].cantidadHabitacionOtra;
               reservaSeleccionada.pasajeroId = pasajeroId;
               if (requiere == "SI") {
                   reservaSeleccionada.modifica = false;
               } else {
                   reservaSeleccionada.modifica = true;
               }               
            }
        }
    });
    
    reservaSeleccionada.pasajeroId =pasajeroId;
    jQuery.ajax({
        type : 'POST',
        url : '<c:url value="/app/servicioPasajero/evento/id/"/>' + eventoId + '/pasajero/id/' + pasajeroId + '/alojamiento',
        contentType : 'application/json',
        dataType : 'json',
        data : $.toJSON(reservaSeleccionada),
        success : servicioReservarRegistroAlojamientoSuccessCallBack,
        error : servicioReservarRegistroAlojamientoErrorCallBack

    });
    
    
    return false;
	
}

function bindearEventos() {
	$(".reserva").delegate("input.requiere_reserva", "click", function(){
        var $this = $(this);
        var reservaAlojamientoFormId = $this.parent().parent().parent().attr("id");
        var $radioRequiere = $("input[name='" + reservaAlojamientoFormId + "[]requiere']:checked");
        var $reservaAlojamiento = $("#"+reservaAlojamientoFormId);
        if ($radioRequiere.val() != "NO") {
             $(".reserva").not("#"+reservaAlojamientoFormId).each(function(){
                   var $this = $(this);
                   //$("input[type=text]", $this).val("");
                   $("input[id $='noRequiere']:radio", $this).attr("checked", "checked");
                   $(".reserva_cantHab", $this).hide();
             });         
             $(".reserva_cantHab", $reservaAlojamiento).show();
        } else {
        	$(".reserva_cantHab", $reservaAlojamiento).hide();        	
        }
    });
}


function servicioObtenerRegistroAlojamientoSuccessCallBack(data) {
	if (data.alojamientosVo.length == 0) {
		 servicioSuccessMensaje("#mensaje","No hay registro de alojamiento para el evento");
	} else {
		$("#alojamiento_tmpl").tmpl(data.alojamientosVo).appendTo("#contenedor_alojamiento");
		if (data.pasajero.acompanianteDe == null) {
			  $("#companiero_tmpl").tmpl(data.pasajero.acompaniantes).appendTo("#contenedor_companieros");
			  
			  
		} else {
			  $("#contenedor_companieros").remove();
			  var $companiero = $("#companiero");
			  $("h3", $companiero).text("Acompañante de");
			  var link = "<a href='<c:url value="/app/page/evento/"/><c:out value="${eventoId}"/>/pasajero/" + data.pasajero.acompanianteDe.id + "/servicio' >" + data.pasajero.acompanianteDe.persona.apellido +  " " + data.pasajero.acompanianteDe.persona.nombre + "</<a>"
			  $companiero.append(link);
		}
		inicarFormulario();
	}
	inicarFormulari
}

function inicarFormulario() {
	bindearEventos();
    $("#content_form").show();
    $(".reserva").each(function(){
        var $this = $(this); 
        var id = $this.attr("id");
        var $radioRequiere = $("input[name='" + id + "[]requiere']:checked", $this);
        var requiere;
        if ($radioRequiere.length) {
            requiere = $radioRequiere.val();
            if (requiere != "NO"){
                $(".reserva_cantHab", $this).show();
            } else {
                $(".reserva_cantHab", $this).hide();
            }
            

        }
    });
}

function servicioObtenerRegistroAlojamientoErrorCallBack(data) {
    if (data.status == 412) {
        var responseObject = jQuery.parseJSON( data.responseText );
        servicioErrorMensaje("#mensaje", responseObject.error, data);
    } else {
        servicioErrorMensaje("#mensaje", "No se pudo obtener los alojamientos registrados", data);
    }
}

function servicioReservarRegistroAlojamientoSuccessCallBack(data) {
	$("#contenedor_alojamiento .reserva").remove();    
    servicioSuccessMensaje("#mensaje","Se actualiz&oacute; correctamente");    
    $("#alojamiento_tmpl").tmpl(data.alojamientosVo).appendTo("#contenedor_alojamiento");
    inicarFormulario();    
} 
function servicioReservarRegistroAlojamientoErrorCallBack(data) {
    if (data.status == 412) {
        var responseObject = jQuery.parseJSON( data.responseText );
        servicioErrorMensaje("#mensaje", responseObject.error, data);
    } else {
        servicioErrorMensaje("#mensaje", "No se pudo reservar el alojamiento", data);
    }
}




</script>
<script id="alojamiento_tmpl" type="textseccion_evento/x-jQuery-tmpl">
<div class="reserva" id="\${alojamiento.id}">
    <div class="radio_column triple">
        <h3>\${alojamiento.hotel.nombre}</h3>
        <div >
            <input id="alojamiento_\${alojamiento.id}.registroAlojamientoId" name="\${alojamiento.id}[]registroAlojamientoId" type="hidden" value="\${registroAlojamiento.id}" />
            <input id="alojamiento_\${alojamiento.id}.modifica" name="\${alojamiento.id}[]modifica" type="hidden" />
            {{if reservaAlojamiento != null  }}
                <input id="alojamiento_\${alojamiento.id}.id" name="\${alojamiento.id}[]id" type="hidden" value="\${reservaAlojamiento.id}" />                
            {{else}}
                <input id="alojamiento_\${alojamiento.id}.id" name="\${alojamiento.id}[]id" type="hidden" />
            {{/if}}
            {{if (reservaAlojamiento != null  && !reservaAlojamiento.modifica)  }}
                <input id="alojamiento_\${alojamiento.id}.requiere" name="\${alojamiento.id}[]requiere" type="radio" value="SI" checked="checked" class="requiere_reserva"/>
            {{else}}
                <input id="alojamiento_\${alojamiento.id}.requiere" name="\${alojamiento.id}[]requiere" type="radio" value="SI" class="requiere_reserva"/>
            {{/if}}
            <label for="alojamiento.requiere">Si</label> 
            {{if reservaAlojamiento == null  }}                    
                <input id="alojamiento_\${alojamiento.id}.noRequiere" name="\${alojamiento.id}[]requiere" type="radio" value="NO" checked="checked" class="requiere_reserva"/>
            {{else}}
                <input id="alojamiento_\${alojamiento.id}.noRequiere" name="\${alojamiento.id}[]requiere" type="radio" value="NO" class="requiere_reserva"/>
            {{/if}}
            <label for="alojamiento_\${alojamiento.id}.noRequiere">No</label> 
            {{if (reservaAlojamiento != null  && reservaAlojamiento.modifica)  }}                    
                <input id="alojamiento_\${alojamiento.id}.modifica" name="\${alojamiento.id}[]requiere" type="radio" value="MODIFICA" checked="checked" class="requiere_reserva"/>
            {{else}}
                <input id="alojamiento_\${alojamiento.id}.modifica" name="\${alojamiento.id}[]requiere" type="radio" value="MODIFICA" class="requiere_reserva"/>
            {{/if}}
            <label for="alojamiento_\${alojamiento.id}.modifica">Modifica</label> 
        </div>
    </div>
    <div class="reserva_cantHab">
    <div>
        <label for="alojamiento_\${alojamiento.id}.cantidadHabitacionSimple">Cantidad hab. Simples <span>(\${registroAlojamiento.cantidadHabitacionSimple}/\${alojamiento.cantidadHabitacionSimple})</span></label>
        {{if reservaAlojamiento != null  }}
            <input id="alojamiento_\${alojamiento.id}.cantidadHabitacionSimple" name="\${alojamiento.id}[]cantidadHabitacionSimple" type="text" value="\${reservaAlojamiento.cantidadHabitacionSimple}"/>
        {{else}}
            <input id="alojamiento_\${alojamiento.id}Alojamiento.cantidadHabitacionSimple" name="\${alojamiento.id}[]cantidadHabitacionSimple" type="text"/>
        {{/if}}
    </div>
    <div>
        <label for="alojamiento_\${alojamiento.id}.cantidadHabitacionDoble">Cantidad hab. Dobles <span>(\${registroAlojamiento.cantidadHabitacionDoble}/\${alojamiento.cantidadHabitacionDoble})</span></label>
        {{if reservaAlojamiento != null }}
            <input id="alojamiento_\${alojamiento.id}.cantidadHabitacionDoble" name="\${alojamiento.id}[]cantidadHabitacionDoble" type="text" value="\${reservaAlojamiento.cantidadHabitacionDoble}" />
        {{else}}
            <input id="alojamiento_\${alojamiento.id}.cantidadHabitacionDoble" name="\${alojamiento.id}[]cantidadHabitacionDoble" type="text"  />
        {{/if}}
    </div>
    <div>
        <label for="alojamiento_\${alojamiento.id}.cantidadHabitacionOtra">Cantidad hab. Otras <span>(\${registroAlojamiento.cantidadHabitacionOtra}/\${alojamiento.cantidadHabitacionOtra})</span></label>
        {{if reservaAlojamiento != null }} 
            <input id="alojamiento_\${alojamiento.id}.cantidadHabitacionOtra" name="\${alojamiento.id}[]cantidadHabitacionOtra" type="text" value="\${reservaAlojamiento.cantidadHabitacionOtra}" />
        {{else}}
            <input id="alojamiento_\${alojamiento.id}.cantidadHabitacionOtra" name="\${alojamiento.id}[]cantidadHabitacionOtra" type="text"  />
        {{/if}}
    </div>
    </div>
</div>
</script>
<script id="companiero_tmpl" type="text/x-jQuery-tmpl">
    <li><a href='<c:url value="/app/page/evento/"/><c:out value="${eventoId}"/>/pasajero/\${id}/servicio'>\${persona.nombre} \${persona.apellido}</a></li>
</script>



    <div class="row">
        <h2>Servicio</h2>
        <div class="contenedor_mensaje col col_16">
            <div  id="mensaje"></div>
        </div>
    </div>
    <div class="row steps content_form">
        <div class="col col_3">&nbsp;</div>
		<div class="col col_10">
	        <form id="form_alojamiento" name="form_alojamiento">
	            <fieldset class="step s_column" id="seccion_alojamiento">
	            <legend>Alojamientos</legend>
	                <div id="contenedor_alojamiento">

	                </div>
	                <div id="companiero"> 
	                    <h3>Comparte con</h3>
	                    <ul id="contenedor_companieros">
	                        
	                    </ul>
	                </div>                          
	                                            
	            </fieldset>
	            <button class="button" id="crear_actualizar">Crear</button>
	            <button class="button" id="volver" class="cancel">Volver al listado</button>
	        </form>
		  </div>
        <div class="col col_3">&nbsp;</div>
    </div>        
